<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition>
	<p:panel>
		<h:panelGrid columns="1" cellspacing="15px"
			style="width:100%;font-size:0.8em">

			<h:panelGroup rendered="#{orderModel.current.isConfirmed}"
				style="font-size:1.2em">
				<h:outputText value="#{msgs.dearCustomer}, #{msgs.yourOrder} "></h:outputText>
				<h:outputText
					value="#{orderModel.current.number} #{msgs.hasBeenConfirmed},"></h:outputText>
				<h:outputFormat value="#{msgs.weWillDeliverTo} ">
					<f:param
						value="#{orderModel.current.customer.dropOffLocation.address} #{orderModel.current.customer.dropOffLocation.district} (#{orderModel.current.customer.dropOffLocation.postCode})"></f:param>
					<f:param value="#{orderModel.current.requiredDateLabel}"></f:param>
				</h:outputFormat>
			</h:panelGroup>

			<h:panelGroup rendered="#{orderModel.current.isConfirmed}"
				style="font-size:1.2em">
				<h:outputFormat value="#{msgs.youCanPickupYourOrderAt}">
					<f:param value="#{orderModel.current.pickupTimeRangeLabel}"></f:param>
				</h:outputFormat>
			</h:panelGroup>

			<h:panelGroup rendered="#{orderModel.current.isReceived}"
				style="font-size:1.2em">
				<h:outputText value="#{msgs.dearCustomer}, #{msgs.yourOrder} "></h:outputText>
				<h:outputText
					value="#{orderModel.current.number} #{msgs.hasBeenReceived}, " />

				<h:outputFormat value="#{msgs.weWillConfirmYourOrder}">
					<f:param
						value="#{orderModel.current.requiredDate} #{orderModel.current.pickupTimeRangeLabel}"></f:param>
				</h:outputFormat>
			</h:panelGroup>

			<h:panelGroup rendered="#{orderModel.current.isReceived}"
				style="font-size:1.2em">
				<h:outputText value="#{msgs.weWillSendYouConfirmInfo} "></h:outputText>
				<h:commandLink value="#{msgs.webSiteName}"
					action="/index.xhtml?faces-redirect=true"></h:commandLink>
				<h:outputText value=" #{msgs.checkYouOrderStatus}."></h:outputText>
			</h:panelGroup>



			<p:dataTable id="orderDetailInfo"
				value="#{orderModel.current.orderDetails}" var="orderDetail"
				sortBy="1" style="width:100%" rowClasses="oddRow, evenRow">

				<p:columnGroup type="header">
					<p:row>
						<p:column rowspan="1" colspan="2" headerText="#{msgs.orderNumber}"
							style="text-align:right" />
						<p:column rowspan="1" colspan="3"
							headerText="#{orderModel.current.number}" style="text-align:left" />
					</p:row>
					<p:row>
						<p:column rowspan="3" colspan="1"
							headerText="#{msgs.customerInfo}" style="color:green" />
						<p:column rowspan="1" colspan="1"
							headerText="#{orderModel.current.customer.lastName} #{orderModel.current.customer.firstName}"
							style="text-align:left;color:green" />

						<p:column rowspan="3" colspan="1" headerText="#{msgs.pickUpInfo}"
							style="color:green" />
						<p:column rowspan="1" colspan="2"
							headerText="#{orderModel.current.customer.dropOffLocation.name} "
							style="text-align:left;color:green" />
					</p:row>
					<p:row>
						<p:column rowspan="1" colspan="1"
							headerText="#{orderModel.current.customer.telephone}"
							style="text-align:left;color:green" />
						<p:column rowspan="1" colspan="2"
							headerText="#{orderModel.current.customer.dropOffLocation.address} #{orderModel.current.customer.dropOffLocation.district} (#{orderModel.current.customer.dropOffLocation.postCode})"
							style="text-align:left;color:green" />
					</p:row>
					<p:row>
						<p:column rowspan="1" colspan="1"
							headerText="#{orderModel.current.customer.address}"
							style="text-align:left;color:green" />
						<p:column rowspan="1" colspan="2"
							headerText="#{orderModel.current.requiredDateLabel} #{orderModel.current.pickupTimeRangeLabel}"
							style="text-align:left;color:green" />
					</p:row>
				</p:columnGroup>
				<ui:remove>
					<p:column>
						<h:graphicImage library="images"
							value="../#{orderDetail.product.icon}32.png"></h:graphicImage>
					</p:column>
					<p:column>
						<f:facet name="header">
							<h:outputText value="Name" />
						</f:facet>
						<h:outputLabel value="#{orderDetail.product.name}"></h:outputLabel>
					</p:column>
					<p:column>
						<f:facet name="header">
							<h:outputText value="Price" />
						</f:facet>
						<h:outputLabel value="#{orderDetail.orderedPrice}"
							style="float:right">
							<f:convertNumber type="currency" currencySymbol="$"
								minFractionDigits="2" maxFractionDigits="2" />
						</h:outputLabel>
					</p:column>

					<p:column>

						<h:outputText
							value=" #{orderDetail.orderedQuantity} #{orderDetail.product.priceUnitLabel}"
							style="float:right"></h:outputText>
					</p:column>
					<p:column>
						<h:outputLabel value="#{orderDetail.orderedSubTotal}"
							style="float:right">
							<f:convertNumber type="currency" currencySymbol="$"
								minFractionDigits="2" maxFractionDigits="2" />
						</h:outputLabel>
						<h:outputText value="#{msgs.plusTax}"
							rendered="#{orderDetail.product.isTaxable}"></h:outputText>
					</p:column>
				</ui:remove>
				<ui:remove>
					<p:columnGroup type="footer">
						<p:row>
							<p:column colspan="4" footerText="#{msgs.total}"
								style="text-align:right" />
							<p:column colspan="1"
								footerText="#{orderModel.current.orderedTotalAmountLabel}"
								style="text-align:right" />
						</p:row>
						<p:row>
							<p:column colspan="4" footerText="#{msgs.discount}"
								style="text-align:right" />

							<p:column colspan="1"
								footerText="#{orderModel.current.promotionDiscount}% #{msgs.off}"
								style="text-align:right" />
						</p:row>
						<p:row>
							<p:column colspan="4" footerText="#{msgs.charge}"
								style="text-align:right" />
							<p:column colspan="1"
								footerText="#{orderModel.current.orderedTotalChargeLabel}"
								style="text-align:right" />
						</p:row>
					</p:columnGroup>
				</ui:remove>
			</p:dataTable>

			<ui:remove>
				<p:outputLabel value="#{msgs.pickupTips}"
					style="color:red; font-size:1.8em; font-style:italic"
					rendered="#{!orderModel.current.customer.dropOffLocation.isFridgeAvailable}"></p:outputLabel>
			</ui:remove>
			
			<h:outputFormat value="#{msgs.weHaveSendOrderInfoToYourEmail}"
				style="float:left">
				<f:param value="#{orderModel.current.customer.email}"></f:param>
			</h:outputFormat>

			<p:separator></p:separator>

			<h:outputFormat value="#{msgs.thankYouForShoppingOn}"
				style="float:right">
				<f:param value="#{msgs.webSiteName}"></f:param>
			</h:outputFormat>

		</h:panelGrid>
	</p:panel>
</ui:composition>

</html>